<template>
  <div class="table_content">
    <!-- 表格列配置 -->
    <div v-if="isCustomHead" class="custom_box">
      <el-button @click="customLie" v-if="isCustomHead"> 自定义列</el-button>
    </div>
    <el-table
      ref="elTableRef"
      v-loading="loading"
      :data="tableData"
      highlight-current-row
      show-header
      fit
      :show-overflow-tooltip="showTooltip"
      :row-key="(row) => row.id"
      @selection-change="handleSelectionChange"
      @sort-change="sortMethod"
      :height="tableHeight"
      :max-height="maxHeight"
    >
      <!-- v-bind="$attrs" -->
      <!-- 多选 -->
      <el-table-column
        type="selection"
        width="35"
        :reserve-selection="reserveSelection"
        v-if="typeSelect"
        v-bind="$attrs"
      />
      <!-- 序号 -->
      <el-table-column type="index" width="50" v-if="typeIndex" />

      <!-- config主体 -->
      <template v-for="item in columnsData" :key="item?.prop">
        <el-table-column
          v-if="!item?.hidden && item?.isShow"
          :fixed="item.fixed"
          :prop="item.prop"
          :label="item.label"
          :min-width="item.minWidth"
          :width="item.width"
          :align="item.align"
          :sortable="item?.sortable"
          :show-overflow-tooltip="item.showOverflowTooltip"
          :formatter="item?.formatter"
          v-bind="$attrs"
        >
          <template #header="{ column, $index }">
            <slot
              v-if="item.slotHeader"
              :name="`${item.slotHeader}`"
              :column="column"
              :index="$index"
            ></slot>
            <slot v-else>{{ column.label }}</slot>
          </template>
          <template #default="scope">
            <template v-if="item.slotName">
              <slot :name="`${item.prop}`" :scope="scope"></slot>
            </template>
          </template>
        </el-table-column>
      </template>
    </el-table>

    <!-- 分页 -->
    <customPagination class="pageBox" v-if="isPagination" v-bind="$attrs" />

    <!-- 自定义列 -->
    <customHeader
      ref="customHeadRef"
      class="pageBox"
      v-if="isCustomHead"
      v-bind="$attrs"
      @success="resetColumns"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import customPagination from "@/components/CustomPagination/index.vue";
import customHeader from "@/components/CustomHeader/index.vue";

const elTableRef = ref();
const props = defineProps({
  // 多选
  typeSelect: {
    type: Boolean,
    default: false,
  },
  // 序号
  typeIndex: {
    type: Boolean,
    default: false,
  },
  columns: {
    type: Array<any>,
  },
  tableData: {
    type: Array,
    default: () => [],
  },
  isPagination: {
    type: Boolean,
    default: true,
  },
  // 加载状态
  loading: {
    type: Boolean,
    default: false,
  },
  // 是否启用 超出 show-overflow-tooltip 显示
  showTooltip: {
    type: Boolean,
    default: false,
  },
  // 是否翻页记录当前页选项
  reserveSelection: {
    type: Boolean,
    default: false,
  },
  // 是否需要显示表格列配置
  isCustomHead: {
    type: Boolean,
    default: false,
  },
  maxHeight: [String, Number],
});

const { columns } = toRefs(props);
const columnsData = ref<Array<any>>();
const tableHeight = ref();

watch(
  // 监听 columns 值的变化，动态显示列
  () => columns?.value,
  (val: any) => {
    columnsData.value = val.map((item: Record<string, any>) => {
      item.isShow = true;
      // 判断 item 对象上是否有hidden, 有则适用没有默认加上 hidden属性且为false
      if (item?.prop != "operator") {
        item.hidden = "hidden" in item ? item.hidden : false;
      }
      return item;
    });
    // console.log("columnsData------", columnsData.value);
  },
  {
    immediate: true,
    deep: true,
  }
);

const emit = defineEmits(["selectionChange", "sortChange"]);
const handleSelectionChange = (val: any) => {
  emit("selectionChange", val);
};

const sortMethod = (val: Record<string, any>) => {
  emit("sortChange", val);
};

// 自定义列
const customHeadRef = ref();
const customLie = () => {
  customHeadRef.value.showDialog(columnsData.value);
};

// 接受自定义列数据
const resetColumns = (val: Array<any>) => {
  columnsData.value = val;
};

onMounted(() => {
  // 设置表格初始高度为innerHeight-offsetTop-表格底部与浏览器底部距离：66 + 顶部固定高度：50
  tableHeight.value = window.innerHeight - elTableRef.value.$el.offsetTop - 118;
  // 监听浏览器高度变化
  window.onresize = () => {
    tableHeight.value =
      window.innerHeight - elTableRef.value.$el.offsetTop - 118;
  };
});

defineExpose({
  columnsData,
  elTableRef,
});
</script>

<style lang="scss" scoped>
.table_content {
  padding: 10px;
  background-color: #fff;

  :deep(.el-table th.el-table__cell) {
    background-color: #f5f5f5;
  }

  .pagination {
    margin-top: 12px;
  }

  :deep(.el-scrollbar__bar.is-horizontal) {
    height: 10px;
  }

  .custom_box {
    display: flex;
    justify-content: flex-end;
    margin-top: -42px;
    margin-bottom: 10px;
  }
}
</style>
